import React from 'react';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import { Carousel as AntCarousel, Row, Col } from 'antd';
import TweenOne from 'rc-tween-one';
import Children from 'rc-tween-one/lib/plugin/ChildrenPlugin';

TweenOne.plugins.push(Children);

class Feature6 extends React.PureComponent {
  constructor(props) {
    super(props);
    this.carouselRef = React.createRef();
    this.state = {
      current: 0,
    };
  }

  onTitleClick = (_, i) => {
    const carouselRef = this.carouselRef.current.childRefs.carousel;
    carouselRef.goTo(i);
  };

  onBeforeChange = (_, newIndex) => {
    this.setState({
      current: newIndex,
    });
  };

  render() {
    const { ...props } = this.props;
    const { current } = this.state;
    
    return (
      <div {...props} className="home-page-wrapper feature6-wrapper">
        <div>
          <OverPack className="home-page feature6" playScale={0.3}>
            <QueueAnim
              key="queue"
              leaveReverse
              type="bottom"
              delay={[0, 100]}
              className="feature6-content-wrapper"
              ref={this.carouselRef}
            >
              <div className="feature6-title-wrapper" key="title">
                <div className="feature6-title">
                  <div
                    className={current === 0 ? 'feature6-title-text active' : 'feature6-title-text'}
                    onClick={(e) => {
                      this.onTitleClick(e, 0);
                    }}
                  >
                    服务指标
                  </div>
                  <div
                    className={current === 1 ? 'feature6-title-text active' : 'feature6-title-text'}
                    onClick={(e) => {
                      this.onTitleClick(e, 1);
                    }}
                  >
                    服务指标
                  </div>
                  <div
                    className="feature6-title-bar-wrapper"
                    style={{
                      width: '50%',
                      left: `${current * 50}%`,
                    }}
                  >
                    <em className="feature6-title-bar" />
                  </div>
                </div>
              </div>
              <AntCarousel
                className="feature6-content"
                key="carousel"
                infinite={false}
                beforeChange={this.onBeforeChange}
                dots={false}
              >
                <div key="0">
                  <QueueAnim type="bottom" component={Row} className="feature6-item" name="block0">
                    <Col md={8} xs={24} className="feature6-number-wrapper" name="child0">
                      <TweenOne
                        className="feature6-number"
                        animation={{
                          Children: {
                            value: 116,
                            floatLength: 0,
                            formatMoney: true,
                          },
                          duration: 1000,
                          delay: 300,
                          ease: 'easeInOutCirc',
                        }}
                        component="span"
                      >
                        0
                      </TweenOne>
                      <span className="feature6-unit">万</span>
                      <p className="feature6-text">模型数据</p>
                    </Col>
                    <Col md={8} xs={24} className="feature6-number-wrapper" name="child1">
                      <TweenOne
                        className="feature6-number"
                        animation={{
                          Children: {
                            value: 1.17,
                            floatLength: 2,
                            formatMoney: true,
                          },
                          duration: 1000,
                          delay: 300,
                          ease: 'easeInOutCirc',
                        }}
                        component="span"
                      >
                        0
                      </TweenOne>
                      <span className="feature6-unit">亿</span>
                      <p className="feature6-text">模型迭代数量</p>
                    </Col>
                    <Col md={8} xs={24} className="feature6-number-wrapper" name="child2">
                      <TweenOne
                        className="feature6-number"
                        animation={{
                          Children: {
                            value: 2.10,
                            floatLength: 2,
                            formatMoney: true,
                          },
                          duration: 1000,
                          delay: 300,
                          ease: 'easeInOutCirc',
                        }}
                        component="span"
                      >
                        0
                      </TweenOne>
                      <span className="feature6-unit">亿</span>
                      <p className="feature6-text">训练样本数量</p>
                    </Col>
                  </QueueAnim>
                </div>
                <div key="1">
                  <QueueAnim type="bottom" component={Row} className="feature6-item" name="block1">
                    <Col md={8} xs={24} className="feature6-number-wrapper" name="child0">
                      <TweenOne
                        className="feature6-number"
                        animation={{
                          Children: {
                            value: 116,
                            floatLength: 0,
                            formatMoney: true,
                          },
                          duration: 1000,
                          delay: 300,
                          ease: 'easeInOutCirc',
                        }}
                        component="span"
                      >
                        0
                      </TweenOne>
                      <span className="feature6-unit">万</span>
                      <p className="feature6-text">模型数据</p>
                    </Col>
                    <Col md={8} xs={24} className="feature6-number-wrapper" name="child1">
                      <TweenOne
                        className="feature6-number"
                        animation={{
                          Children: {
                            value: 1.17,
                            floatLength: 2,
                            formatMoney: true,
                          },
                          duration: 1000,
                          delay: 300,
                          ease: 'easeInOutCirc',
                        }}
                        component="span"
                      >
                        0
                      </TweenOne>
                      <span className="feature6-unit">亿</span>
                      <p className="feature6-text">模型迭代数量</p>
                    </Col>
                    <Col md={8} xs={24} className="feature6-number-wrapper" name="child2">
                      <TweenOne
                        className="feature6-number"
                        animation={{
                          Children: {
                            value: 2.10,
                            floatLength: 2,
                            formatMoney: true,
                          },
                          duration: 1000,
                          delay: 300,
                          ease: 'easeInOutCirc',
                        }}
                        component="span"
                      >
                        0
                      </TweenOne>
                      <span className="feature6-unit">亿</span>
                      <p className="feature6-text">训练样本数量</p>
                    </Col>
                  </QueueAnim>
                </div>
              </AntCarousel>
            </QueueAnim>
          </OverPack>
        </div>
      </div>
    );
  }
}
export default Feature6;
